﻿@namespace MudBlazor.Docs.Examples

<MudStack>
    <MudDateRangePicker Label="Basic range picker" @bind-DateRange="_dateRange" />
    <MudDateRangePicker Label="Basic range picker (editable)" Editable="true" @bind-DateRange="_dateRange" />
    <MudDateRangePicker Label="Placeholder" @bind-DateRange="_dateRange" PlaceholderStart="Start Date" PlaceholderEnd="End Date" />
    <MudDateRangePicker Label="Clearable" @bind-DateRange="_dateRange" Clearable="true" />
    <MudDateRangePicker Label="Range picker format" HelperText="For custom cultures" DateFormat="dd/MM/yyyy" TitleDateFormat="dddd, dd. MMMM" @bind-DateRange="_dateRange" />
    <MudDateRangePicker Label="Custom start month" StartMonth="@DateTime.Now.AddMonths(-1)" @bind-DateRange="_dateRange" />
    <MudDateRangePicker @ref="_picker" Label="With action buttons" @bind-DateRange="_dateRange" AutoClose="@_autoClose">
        <PickerActions>
            <MudButton Class="mr-auto align-self-start" OnClick="@(() => _picker.ClearAsync())">Clear</MudButton>
            <MudButton OnClick="@(() => _picker.CloseAsync(false))">Cancel</MudButton>
            <MudButton Color="Color.Primary" OnClick="@(() => _picker.CloseAsync())">OK</MudButton>
        </PickerActions>
    </MudDateRangePicker>
    <MudSwitch @bind-Value="_autoClose" Color="Color.Secondary">AutoClose</MudSwitch>
</MudStack>

@code { 
    private MudDateRangePicker _picker;
    private DateRange _dateRange = new DateRange(DateTime.Now.Date, DateTime.Now.AddDays(5).Date);
    private bool _autoClose;
}